<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="更新">
    </el-page-header>
    <div class="model-content">
      <el-form ref="ruleForm" style="width:80%;"  :rules="rules" :model="form" label-width="160px">
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="广告名称" size="mini" prop="title">
              <el-input v-model="form.title" name="title">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="广告位" size="mini" prop="adPosition">
              <el-select style="width: 100%;" v-model="form.adPosition" filterable clearable placeholder="请选择">
                <el-option v-for="item in adPositionOptions" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="广告图片" size="mini" prop="path">
              <avatar v-model="form.path"></avatar>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="广告开始时间" size="mini" prop="beginDate">
              <el-date-picker v-model="form.beginDate" type="datetime" value-format="yyyy-MM-dd HH:mm"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="广告结束时间" size="mini" prop="endDate">
              <el-date-picker v-model="form.endDate" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="链接地址" size="mini" prop="url">
              <el-input v-model="form.url" name="url">
              </el-input>
            </el-form-item>

          </el-col>
          <el-col :span="24">
            <el-form-item label="内容" size="mini" prop="note">
              <el-input v-model="form.note" name="note" type="textarea"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" style="text-align: right;padding-bottom: 20px;padding-top: 20px;">
            <el-button @click="goBack">取消</el-button>
            <el-button type="primary" @click="updateData">确定</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
  import common from "@/mixins/common.js";
  import avatar from "@/components/avatar.vue";
  var config = {};
  config.methods = {};
  config.mixins = [common];
  config.components = {
    avatar
  };


  config.data = function () {
    return {
      form: {
        title: '',
        adPosition: '',
        type: '',
        path: '',
        beginDate: '',
        endDate: '',
        url: '',
        sortNum: '',
        note: ''
      },
      adPositionOptions: [],
      rules: {
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        adPosition: [{
          required: true,
          message: '请输入广告位',
          trigger: 'blur'
        }],
      }
    }
  };




  config.methods.updateData = function () {
    var self = this;
    this.$refs["ruleForm"].validate(function (valid) {
      if (valid) {
        self.updateDataPost();
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  }

  config.methods.updateDataPost = function () {
    var self = this,
      data = this.form;
    if (this.deforeUpdateData) {
      this.deforeUpdateData();
    }
    this.postData("/tenantRest/ad/update.htm", data, function (res) {
      if (res.code == 0) {
        self.$message({
          message: '添加数据成功',
          type: 'success'
        });
        self.$router.go(-1);
      } else {
        self.$message.error(res.msg);
      }
    });
  }


  config.methods.loadAdPositionOptions = function () {
    var self = this;
    var param = {};
    param.sortMethod = "asc";
    param.sortField = "id";
    param.level = 1;
    param.size = 500;
    param.fetch = 0;
    this.postData("/tenantRest/adposition/list.htm", param, function (result) {
      if (result.code == 0) {
        self.adPositionOptions = result.list;
      }
    });
  }


  config.mounted = function () {
    this.loadAdPositionOptions();

    var id = this.$route.query.id;
    var self = this;
    var data = {};
    data.id = id;
    this.postData("/tenantRest/ad/view.htm", data, function (res) {
      if (res.code == 0) {
        self.form = res;
      }
    });

  }


  export default config;
</script>

<style scoped>

</style>